<template>
  <div class="MentorInpatientDiseaseCureAnalyze item5">
    <!--    门诊住院疾病诊断分析-->
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <el-row :gutter="12">
              <el-col :md="16" :lg="16" :xl="12">
                <el-form-item label="时间区间" prop="priceTime">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="就诊类型" prop="mdtrtType">
                  <el-select
                    v-model="searchForm.mdtrtType"
                    clearable
                    placeholder="请选择"
                    style="width:100%;"
                  >
                    <el-option
                      v-for="item in visitOptions"
                      :key="item.dictValue"
                      :label="item.dictValue"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="诊断疾病" prop="diseCode">
                  <el-select
                    v-model="searchForm.diseCode"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width:100%;"
                    :filter-method="dataFilter"
                  >
                    <el-option
                      v-for="item in projectOptions"
                      :key="item.diseCode"
                      :label="item.diseName"
                      :value="item.diseCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="12">
                <el-button
                  type="primary"
                  plain
                  size="small"
                  @click="search"
                >查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer ts">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-header handle">
              <span class="box-title">诊断疾病人次单位类型对比</span>
            </div>
            <unit-diagnosis-diseases :v-loading="chartLoading1" :axis-data="unitAxisData" :series-data="unitSeriesData" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header handle">
              <span class="box-title">诊断疾病人次人群类型对比</span>
            </div>
            <person-diagnosis-diseases :v-loading="chartLoading2" :axis-data="personAxisData" :series-data="personSeriesData" />
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import { companytypeGetAll, persontypeGetAll, diseaseGetAll } from '@/api/assist-decision/mentorInpatientDiseaseCureAnalyze'
import UnitDiagnosisDiseases from './components/unit-diagnosis-diseases'
import PersonDiagnosisDiseases from './components/person-diagnosis-deseases'
import PriceTime from '../components/PriceTime'
export default {
  name: 'MentorInpatientDiseaseCureAnalyze',
  components: {
    'unit-diagnosis-diseases': UnitDiagnosisDiseases, // 诊断疾病人次单位类型对比柱状图
    'person-diagnosis-diseases': PersonDiagnosisDiseases, // 诊断疾病人次人群类型对比柱状图
    'price-time': PriceTime
  },
  data() {
    return {
      searchForm: {
        beginDate: null,
        endDate: null, // 时间区间
        mdtrtType: null, // 就诊类型
        diseCode: null, // 诊断疾病
        diseName: null
      },
      diseaseData: [],
      projectOptions: [],
      chartLoading1: false,
      chartLoading2: false,
      personAxisData: [],
      personSeriesData: [],
      unitAxisData: [],
      unitSeriesData: []
    }
  },
  computed: {
    visitOptions: function() {
      return this.$store.getters.selectMaps.MDTRT_TYPE
    }

  },
  created() {

  },
  mounted() {
    this.getAllData()
  },
  methods: {
    dataFilter(val) {
      if (this.diseaseData.length > 0 && val.trim()) {
        this.projectOptions = this.diseaseData.filter(item => item.diseName.indexOf(val) > -1)
      } else {
        this.projectOptions = []
      }
    },
    priceTimeChange(v) {
      this.searchForm.beginDate = v[0] || null
      this.searchForm.endDate = v[1] || null
    },
    restSearch(formName) {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs[formName].resetFields()
    },
    search() {
      this.diseaseData.forEach(item => {
        if (item.diseCode === this.searchForm.diseCode) {
          this.searchForm.diseName = item.diseName
        }
      })
      const data = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        diseCode: this.searchForm.diseCode,
        diseName: this.searchForm.diseName,
        mdtrtType: this.searchForm.mdtrtType
      }
      this.chartLoading1 = true
      this.chartLoading2 = true
      Promise.all([companytypeGetAll(data), persontypeGetAll(data)]).then(res => {
        // this.personAxisData = res[0].data.map(item => {
        //   return item.psnType
        // })
        // this.personSeriesData = res[0].data.map(item => {
        //   return { name: item.psnType, value: item.psnCount }
        // })
        console.log(res)
        // this.unitAxisData = res[1].data.map(item => {
        //   return item.lv3PsnType
        // })
        // this.unitSeriesData = res[1].data.map(item => {
        //   return { name: item.lv3PsnType, value: item.psnCount }
        // })
        this.chartLoading1 = false
        this.chartLoading2 = false
      }).catch(() => {
        this.chartLoading1 = false
        this.chartLoading2 = false
      })
    },
    getAllData() {
      diseaseGetAll().then(res => {
        this.diseaseData = res.data
      })
    },
    getTableData() {
      const params = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        diseCode: 1,
        diseName: '病一',
        mdtrtType: this.searchForm.mdtrtType
      }
      persontypeGetAll(JSON.stringify(params)).then(res => {
        console.log(res)
      })
    }

  }
}
</script>
<style lang="scss" scoped>
 section:first-child  .el-row:last-child .el-col:last-child{
        text-align: right;
        font-size: 0;
    }
</style>

